<template>
  <a-form-model ref="ruleForm" :model="form" :rules="rules">
    <a-row :gutter="8">
      <a-col :span="11">
        <a-card style="width: 100%; height: 880px;">
          <a-form-model-item prop="leftValue">
            <a-tree-select
              v-model="form.leftValue"
              style="width: 100%;"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="treeData"
              placeholder="请选择点位"
              allow-clear tree-default-expand-all>
            </a-tree-select>
          </a-form-model-item>
          <a-form-model-item prop="leftDate">
            <a-range-picker style="margin-right: 36px;" v-model="form.leftDate" @change="onChange1" />
          </a-form-model-item>
          <div style="width:100%; height:450px;">
            <div id="leftChart" class="five"></div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="2">
        <a-card class="analysis-middle-card">
          <a-button class="analysis-middle-button" size="large" @click="syncRight">同步<a-icon type="right" /></a-button>
          <a-button class="analysis-middle-button" size="large" @click="syncLeft"><a-icon type="left" />同步</a-button>
          <a-form-model-item>
            <a-button class="analysis-middle-button" size="large" v-if="isSend" @click="onSubmit">对比<a-icon type="check" /></a-button>
            <a-button class="analysis-middle-button" size='large' v-if="!isSend">{{sendmsg}}</a-button>
          </a-form-model-item>
          <a-form-model-item prop="dataType">
            <a-select placeholder="请选择数据类型" style="width: 120px;" v-model="form.dataType" @change="parseData">
              <a-select-option value="1">电压</a-select-option>
              <a-select-option value="2">电流</a-select-option>
              <a-select-option value="3">功率</a-select-option>
              <a-select-option value="4">功率因数</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-card>
      </a-col>
      <a-col :span="11">
        <a-card style="width: 100%; height: 880px;">
          <a-form-model-item prop="rightValue">
            <a-tree-select
              v-model="form.rightValue"
              style="width: 100%;"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="treeData"
              placeholder="请选择点位"
              allow-clear tree-default-expand-all>
            </a-tree-select>
          </a-form-model-item>
          <a-form-model-item prop="rightDate">
            <a-range-picker style="margin-right: 36px;" v-model="form.rightDate" @change="onChange2" />
          </a-form-model-item>
          <div style="width:100%; height:450px;">
            <div id="rightChart" class="five"></div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </a-form-model>
</template>
    
  <script>
  import { httpAction, getAction, postAction } from '@/api/manage'
  import * as echarts from 'echarts';
  export default {
      data() {
        return {
          chart1: null,
          chart2: null,
          data: [],
          sendmsg: '',
          isSend: true,
          form: {
            leftValue: undefined,
            rightValue: undefined,
            leftDate: undefined,
            rightDate: undefined,
            dataType: undefined,
            leftDateString: [],
            rightDateString: [],
          },
          rules: {
            leftValue: [{ required: true, message: '请补充完整信息'},],
            rightValue: [{ required: true, message: '请补充完整信息'}],
            leftDate: [{ required: true, message: '请补充完整信息'}],
            rightDate: [{ required: true, message: '请补充完整信息'}],
            dataType: [{ required: true, message: '请补充完整信息'}],
          },
          treeData: [],
          url: {
            getTree: '/energyMeterMapping/energyMeterMapping/getTreeData',
            getAnalysis:'/consumptionElectricity/consumptionElectricity/getAnalysis',
            getTracking: '/consumptionElectricity/consumptionElectricity/getTracking',
          },
        };
      },
      methods: {
        getTree(){
            this.treeData = []
            getAction(this.url.getTree).then((res)=>{
              if (res.success) {
                this.$nextTick(() => {
                  this.treeData = res.result;
                });
              } 
            })
        },
        onChange1(date, dateString) {
          this.form.leftDateString = dateString;
          console.log(this.form.leftDateString);
        },
        onChange2(date, dateString) {
          this.form.rightDateString = dateString;
          console.log(this.form.rightDateString);
        },
        syncRight(){
          this.form.rightValue = this.form.leftValue;
          this.form.rightDate = this.form.leftDate;
          this.form.rightDateString = this.form.leftDateString;
        },
        syncLeft(){
          this.form.leftValue = this.form.rightValue;
          this.form.leftDate = this.form.rightDate;
          this.form.leftDateString = this.form.rightDateString;
        },
        onSubmit() {
          this.$refs.ruleForm.validate(valid => {
            if (valid) {
              postAction(this.url.getAnalysis, this.form).then((res)=>{
                if(res.success){
                  this.isSend = false;
                  let timer = 10;
                  this.sendmsg = timer + "s";
                  this.timeFun = setInterval(() => {
                      --timer;
                      this.sendmsg = timer + "s";
                      if (timer == 0) {
                          this.isSend = true;
                          clearInterval(this.timeFun);
                      }
                  }, 1000);
                  this.$nextTick(() => {
                    this.data = res.result;
                    this.parseData(this.form.dataType);
                  });
                }
              })
            } else {
              return false;
            }
          });
        },
        parseData(value){
          if(Array.isArray(this.data) && this.data.length){
            switch(value){
              case "1":
                this.initLeftVoltage(this.data[0]);
                this.initRightVoltage(this.data[1]);
                break;
              case "2":
                this.initLeftCurrent(this.data[0]);
                this.initRightCurrent(this.data[1]);
                break;
              case "3":
                this.initLeftPower(this.data[0]);
                this.initRightPower(this.data[1]);
                break;
              case "4":
                this.initLeftFactor(this.data[0]);
                this.initRightFactor(this.data[1]);
                break;
            }
          }
        },
        initLeftVoltage(result) {
            if(this.chart1 != null && this.chart1 != '' && this.chart1 != undefined){
                this.chart1.dispose();
            }
            var chartDom = document.getElementById('leftChart');
            this.chart1 = echarts.init(chartDom);
            var option;

            let date = [];
            let voltageA = [];
            let voltageB = [];
            let voltageC = [];
            let voltageAb = [];
            let voltageBc = [];
            let voltageCa = [];
            result.forEach(e => {
                date.push(e.date);
                voltageA.push(e.voltageA);
                voltageB.push(e.voltageB);
                voltageC.push(e.voltageC);
                voltageAb.push(e.voltageAb);
                voltageBc.push(e.voltageBc);
                voltageCa.push(e.voltageCa);
            })

            option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                    return [pt[0], '10%'];
                    }
                },
                title: {
                    left: 'center',
                    text: '数据分析'
                },
                toolbox: {
                    feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                dataZoom: [
                    {
                    type: 'inside',
                    start: 0,
                    end: 10
                    },
                    {
                    start: 0,
                    end: 10
                    }
                ],
                series: [
                    {
                        name: 'A相电压',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: voltageA
                    },
                    {
                        name: 'B相电压',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: voltageB
                    },
                    {
                        name: 'C相电压',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: voltageC
                    },
                    {
                        name: 'AB线电压',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: voltageAb
                    },
                    {
                        name: 'BC线电压',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: voltageBc
                    },
                    {
                        name: 'CA线电压',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: voltageCa
                    }
                ]
            };

            option && this.chart1.setOption(option);
        },
        initRightVoltage(result) {
            if(this.chart2 != null && this.chart2 != '' && this.chart2 != undefined){
                this.chart2.dispose();
            }
            var chartDom = document.getElementById('rightChart');
            this.chart2 = echarts.init(chartDom);
            var option;

            let date = [];
            let voltageA = [];
            let voltageB = [];
            let voltageC = [];
            let voltageAb = [];
            let voltageBc = [];
            let voltageCa = [];
            result.forEach(e => {
                date.push(e.date);
                voltageA.push(e.voltageA);
                voltageB.push(e.voltageB);
                voltageC.push(e.voltageC);
                voltageAb.push(e.voltageAb);
                voltageBc.push(e.voltageBc);
                voltageCa.push(e.voltageCa);
            })

            option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                    return [pt[0], '10%'];
                    }
                },
                title: {
                    left: 'center',
                    text: '数据分析'
                },
                toolbox: {
                    feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                dataZoom: [
                    {
                    type: 'inside',
                    start: 0,
                    end: 10
                    },
                    {
                    start: 0,
                    end: 10
                    }
                ],
                series: [
                    {
                        name: 'A相电压',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: voltageA
                    },
                    {
                        name: 'B相电压',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: voltageB
                    },
                    {
                        name: 'C相电压',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: voltageC
                    },
                    {
                        name: 'AB线电压',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: voltageAb
                    },
                    {
                        name: 'BC线电压',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: voltageBc
                    },
                    {
                        name: 'CA线电压',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: voltageCa
                    }
                ]
            };

            option && this.chart2.setOption(option);
        },
        initLeftCurrent(result) {
            if(this.chart1 != null && this.chart1 != '' && this.chart1 != undefined){
                this.chart1.dispose();
            }
            var chartDom = document.getElementById('leftChart');
            this.chart1 = echarts.init(chartDom);
            var option;

            let date = [];
            let currentA = [];
            let currentB = [];
            let currentC = [];
            
            result.forEach(e => {
                date.push(e.date);
                currentA.push(e.currentA);
                currentB.push(e.currentB);
                currentC.push(e.currentC);
            })

            option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                    return [pt[0], '10%'];
                    }
                },
                title: {
                    left: 'center',
                    text: '数据监控'
                },
                toolbox: {
                    feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                dataZoom: [
                    {
                    type: 'inside',
                    start: 0,
                    end: 10
                    },
                    {
                    start: 0,
                    end: 10
                    }
                ],
                series: [
                    {
                        name: 'A相电流',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: currentA
                    },
                    {
                        name: 'B相电流',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: currentB
                    },
                    {
                        name: 'C相电流',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: currentC
                    }
                ]
            };

            option && this.chart1.setOption(option);
        },
        initRightCurrent(result) {
            if(this.chart2 != null && this.chart2 != '' && this.chart2 != undefined){
                this.chart2.dispose();
            }
            var chartDom = document.getElementById('rightChart');
            this.chart2 = echarts.init(chartDom);
            var option;

            let date = [];
            let currentA = [];
            let currentB = [];
            let currentC = [];
            
            result.forEach(e => {
                date.push(e.date);
                currentA.push(e.currentA);
                currentB.push(e.currentB);
                currentC.push(e.currentC);
            })

            option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                    return [pt[0], '10%'];
                    }
                },
                title: {
                    left: 'center',
                    text: '数据监控'
                },
                toolbox: {
                    feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                dataZoom: [
                    {
                    type: 'inside',
                    start: 0,
                    end: 10
                    },
                    {
                    start: 0,
                    end: 10
                    }
                ],
                series: [
                    {
                        name: 'A相电流',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: currentA
                    },
                    {
                        name: 'B相电流',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: currentB
                    },
                    {
                        name: 'C相电流',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: currentC
                    }
                ]
            };

            option && this.chart2.setOption(option);
        },
        initLeftPower(result){
            if(this.chart1 != null && this.chart1 != '' && this.chart1 != undefined){
                this.chart1.dispose();
            }
            var chartDom = document.getElementById('leftChart');
            this.chart1 = echarts.init(chartDom);
            var option;

            let date = [];
            let powerA = [];
            let powerB = [];
            let powerC = [];
            let powerTotal = [];
            
            result.forEach(e => {
                date.push(e.date);
                powerA.push(e.powerA);
                powerB.push(e.powerB);
                powerC.push(e.powerC);
                powerTotal.push(e.powerTotal);
            })

            option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                    return [pt[0], '10%'];
                    }
                },
                title: {
                    left: 'center',
                    text: '数据监控'
                },
                toolbox: {
                    feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                dataZoom: [
                    {
                    type: 'inside',
                    start: 0,
                    end: 10
                    },
                    {
                    start: 0,
                    end: 10
                    }
                ],
                series: [
                    {
                        name: 'A相有功功率',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: powerA
                    },
                    {
                        name: 'B相有功功率',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: powerB
                    },
                    {
                        name: 'C相有功功率',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: powerC
                    },
                    {
                        name: '总有功功率',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: powerTotal
                    }
                ]
            };

            option && this.chart1.setOption(option);
        },
        initRightPower(result){
            if(this.chart2 != null && this.chart2 != '' && this.chart2 != undefined){
                this.chart2.dispose();
            }
            var chartDom = document.getElementById('rightChart');
            this.chart2 = echarts.init(chartDom);
            var option;

            let date = [];
            let powerA = [];
            let powerB = [];
            let powerC = [];
            let powerTotal = [];
            
            result.forEach(e => {
                date.push(e.date);
                powerA.push(e.powerA);
                powerB.push(e.powerB);
                powerC.push(e.powerC);
                powerTotal.push(e.powerTotal);
            })

            option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                    return [pt[0], '10%'];
                    }
                },
                title: {
                    left: 'center',
                    text: '数据监控'
                },
                toolbox: {
                    feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                dataZoom: [
                    {
                    type: 'inside',
                    start: 0,
                    end: 10
                    },
                    {
                    start: 0,
                    end: 10
                    }
                ],
                series: [
                    {
                        name: 'A相有功功率',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: powerA
                    },
                    {
                        name: 'B相有功功率',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: powerB
                    },
                    {
                        name: 'C相有功功率',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: powerC
                    },
                    {
                        name: '总有功功率',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: powerTotal
                    }
                ]
            };

            option && this.chart2.setOption(option);
        },
        initLeftFactor(result){
            if(this.chart1 != null && this.chart1 != '' && this.chart1 != undefined){
                this.chart1.dispose();
            }
            var chartDom = document.getElementById('leftChart');
            this.chart1 = echarts.init(chartDom);
            var option;

            let date = [];
            let factorA = [];
            let factorB = [];
            let factorC = [];
            let factorTotal = [];
            
            result.forEach(e => {
                date.push(e.date);
                factorA.push(e.factorA);
                factorB.push(e.factorB);
                factorC.push(e.factorC);
                factorTotal.push(e.factorTotal);
            })

            option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                    return [pt[0], '10%'];
                    }
                },
                title: {
                    left: 'center',
                    text: '数据监控'
                },
                toolbox: {
                    feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                dataZoom: [
                    {
                    type: 'inside',
                    start: 0,
                    end: 10
                    },
                    {
                    start: 0,
                    end: 10
                    }
                ],
                series: [
                    {
                        name: 'A相功率因数',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: factorA
                    },
                    {
                        name: 'B相功率因数',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: factorB
                    },
                    {
                        name: 'C相功率因数',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: factorC
                    },
                    {
                        name: '总功率因数',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: factorTotal
                    }
                ]
            };

            option && this.chart1.setOption(option);
        },
        initRightFactor(result){
            if(this.chart2 != null && this.chart2 != '' && this.chart2 != undefined){
                this.chart2.dispose();
            }
            var chartDom = document.getElementById('rightChart');
            this.chart2 = echarts.init(chartDom);
            var option;

            let date = [];
            let factorA = [];
            let factorB = [];
            let factorC = [];
            let factorTotal = [];
            
            result.forEach(e => {
                date.push(e.date);
                factorA.push(e.factorA);
                factorB.push(e.factorB);
                factorC.push(e.factorC);
                factorTotal.push(e.factorTotal);
            })

            option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                    return [pt[0], '10%'];
                    }
                },
                title: {
                    left: 'center',
                    text: '数据监控'
                },
                toolbox: {
                    feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                dataZoom: [
                    {
                    type: 'inside',
                    start: 0,
                    end: 10
                    },
                    {
                    start: 0,
                    end: 10
                    }
                ],
                series: [
                    {
                        name: 'A相功率因数',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: factorA
                    },
                    {
                        name: 'B相功率因数',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: factorB
                    },
                    {
                        name: 'C相功率因数',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: factorC
                    },
                    {
                        name: '总功率因数',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: factorTotal
                    }
                ]
            };

            option && this.chart2.setOption(option);
        }
      },
      created () {
        this.getTree();
      },
      mounted(){
        
      },
    };
  </script>
  
<style>
.five {
  width: 100%;
  height: 100%;
}
.analysis-middle-card {
  width: 100%;
  height: 880px;
  display: flex;
  /* align-items: center; */
  justify-content: center;
}

.analysis-middle-button {
  margin: auto; /* 在Flex容器中使按钮居中 */
  margin-bottom: 12px;
  margin-left: 16px;
}
</style>